import React, { Component,lazy,Suspense } from 'react'


import {NavLink,Route,Routes} from 'react-router-dom'


const Home = lazy(()=>import('./Home'))
const About = lazy(()=>import('./About'))

export default class LazyLoad extends Component {
    render() {
        return (
            <div>
                <NavLink to="/home">home</NavLink>
                <br />
                <NavLink to="/about">about</NavLink>
                <Suspense fallback={<h1>加载中</h1>}>
                    <Routes>
                            <Route path="/home" element={<Home/>}/>
                            <Route path="/about" element={<About/>}/>
                            <Route path="*" element={<Home/>}></Route>
                    </Routes>
                </Suspense>
            </div>
        )
    }
}
